<template>
    <div class="selectIcon">
        <el-select :modelValue="modelValue" placeholder="请选择icon图标" filterable @change="changeHandle">
            <el-option v-for="item in icons" :key="item" :label="item" :value="item">
                <el-icon>
                    <component :is="item"></component>
                </el-icon>
                {{ item }}
            </el-option>
        </el-select>
        <el-icon size="20" v-if="modelValue" style="margin-left: 10px;">
            <component :is="modelValue"></component>
        </el-icon>
    </div>
</template>

<script setup>
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import {ref} from 'vue'
   const prop= defineProps({
        modelValue:String
    })
    const emit = defineEmits(['update:modelValue'])
    const icons = ref(Object.keys(ElementPlusIconsVue))
    const changeHandle = (e) => {
        // 实时更新v-model的值
        emit('update:modelValue',e)
    }
</script>

<style lang="less" scoped>
.selectIcon {
    display: flex;
    align-items: center;
    width: 50%;
}
</style>